<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<c:set var="path" value="${pageContext.request.contextPath }" />
<%@ taglib tagdir="/WEB-INF/tags" prefix="matrix"%>
<%@ taglib uri="http://matrixcsm.zkingsoft.com" prefix="cms"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp">
<title data-index="2" id="selextTitle">${网页标题 }</title>
<meta name="keywords" content="${网页关键词}">
<meta name="description" content="${网页描述 }" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
    <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
    <script src="http://apps.bdimg.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
<link
	href="${path }/resource/plugin/bootstrap-3.3.5/css/bootstrap.min.css"
	rel="stylesheet" type="text/css">
<link
	href="${path }/resource/plugin/font-awesome/css/font-awesome.min.css"
	rel="stylesheet" type="text/css">
<link href="${path }/resource/css/styleOne/animate.min.css"
	rel="stylesheet" type="text/css" />
<link href="${path }/resource/css/visitor/base.css" rel="stylesheet"
	type="text/css">
<link rel="shortcut icon" href="${浏览器logo }">
<style>
.wrap {
	padding: 80px 0;
	overflow: hidden
}

.context-left {
	width: 23%;
	display: inline-block;
	float: left;
	padding: 0px 20px;
}

.context-right {
	width: calc(77% - 30px);
	display: inline-block;
	background-color: white;
	margin-left: 30px;
	vertical-align: top;
	float: left;
}

.cL-header, .cLeft-item li {
	width: 100%;
	text-align: center;
	height: 50px;
	line-height: 50px;
	background-color: white;
}

.cL-header {
	background-color: #584d94;
	height: 60px;
	line-height: 60px;
}

.cL-header>strong {
	font-family: "微软雅黑", Arial;
	color: white;
	font-size: 24px;
	font-weight: bold;
}

.cLeft-item {
	border: 2px solid #584d94;
}

.cLeft-item li {
	cursor: pointer;
}

.cLeft-item li.active {
	background: #f2f2f2
}

.cLeft-item li:hover {
	background-color: #f2f2f2;
}

.cLeft-item li a {
	letter-spacing: 1px;
	color: #584d94;
}

.cLeft-item li a:hover {
	text-decoration: none;
}

.cR-header {
	margin-left: 30px;
	margin-bottom: 20px;
	height: 60px;
	line-height: 60px;
	border-bottom: 1px solid #dddddd;
}

.cR-header>strong {
	font-style: normal;
	color: #584d94;
	font-size: 22px;
	font-weight: normal;
}
/*.cRight-item{  display: inline-flex;  display: -webkit-inline-flex;  flex-flow:row wrap;
            justify-content: space-between;  align-items: baseline;  padding: 0 30px;  }*/
.cRight-item {
	padding: 0 30px;
}

.cRi-1 {
	float: left;
	margin-right: 30px;
	width: 46%;
	margin-bottom: 30px;
	border: 1px solid lightgray;
	text-align: center;
}

.cRi-1 div {
	margin-bottom: 10px;
}

.cRi-1 .img-wrap {
	width: 100%;
	height: 70%;
}

.cRi-1 .img-wrap img {
	width: 100%;
	height: 240px
}

.cRi-1-2 {
	color: lightslategray;
	font-size: 14px;
	padding-right: 10px;
}

.cRi-1-2+span {
	font-size: small;
	color: lightgray;
}

.cRi-1-3 {
	display: inline-block;
	height: 30px;
	line-height: 30px;
	padding: 0px 20px;
	background-color: #7062b9;
	color: #FFFFFF;
	cursor: pointer;
}

.cRi-1-3:hover {
	background-color: #f2f2f2;
	color: #7062b9;
}
</style>


</head>
<body class="">
	<jsp:include page="_top.jsp"></jsp:include>
	<cms:ad var="banner" code="ggxtfjBanner" multi="false"></cms:ad>
	<div class="banner">
		<img src="${banner.adImg }" alt="">
	</div>

	<div class="container">
		<div class="wrap">
			<div class="context-left">
				<div class="cL-header">
					<strong>产品研发</strong>
				</div>
				<ul class="cLeft-item">
					<cms:artType var="items" code="gjgsj"></cms:artType>
					<c:forEach var="item" items="${items }">
						<li
						 <c:if test="${param.code eq item.code}"> class="active" </c:if> 
						><a href="${path }/redirect/cpyf?code=${item.code }&pageNow=0">${item.artTypeName }</a></li>
					</c:forEach>
				</ul>
			</div>
			<cms:arts var="items" code="${param.code }"  pageNow="${param.pageNow}" pageSize="10"></cms:arts>
			<div class="context-right">
				<div class="cR-header">
					<strong>${cate.artTypeName }</strong>
				</div>

				<!--空间钢构承包-->
				<div class="cRight-item">

					<c:forEach var="item" items="${items }">
						<div class="cRi-1">
							<a href="${path }/redirect/case_detail?id=${item.artId}">
								<div class="img-wrap">
									<img src="${item.artImage }" alt="">
								</div>
								<div>
									<div>
										<span class="cRi-1-2">详细介绍</span><span>${item.artAbstract }</span>
									</div>
									<div>
										<span class="cRi-1-3">详细内容</span>
									</div>
								</div>
							</a>
						</div>
					</c:forEach>
				</div>
			</div>
			<div class="pages">
				<c:forEach var="i" begin="1" end="${recodeCount }" step="1">
					<a href="${path }/redirect/cpyf?&code=${cate.code }&pageNow=${i-1}" class="active">${i}</a>
				</c:forEach>
			</div>
		</div>
	</div>


	<jsp:include page="_foot.jsp"></jsp:include>
</body>
<script type="text/javascript"
	src="${path }/resource/js/plugin/jquery-2.1.4.min.js"></script>
<script type="text/javascript"
	src="${path }/resource/js/systools/AjaxProxy.js"></script>
<script type="text/javascript"
	src="${path }/resource/plugin/bootstrap-3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(".nav-item li").eq(3).addClass("active")

</script>
</body>
</html>
